<template>
  <div class="home">
    <el-container style="height: 100vh;">
      <el-aside :width="width + 'px'">
        <el-menu
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
          background-color="rgb(32,33,36)"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          :default-active="pathline"
        >
          <template v-for="(item, i) in selectlist">
            <el-submenu
              v-if="item.list.length > 1"
              :index="String(i + 1)"
              :key="i"
            >
              <template slot="title">
                <i class="el-icon-s-data" style="color:#ccc"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="items.path"
                  v-for="(items, index) in item.list"
                  :key="index"
                  >{{ items.listname }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item
              v-if="item.list.length && item.list.length < 2"
              :index="item.list[0].path"
              :key="i"
            >
              <i class="el-icon-s-data" style="color:#ccc"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header
          style="text-align: left; font-size: 12px; background:white;border-bottom:1px solid #ccc;display: flex;"
        >
          <i
            v-if="!isCollapse"
            class="el-icon-s-fold"
            style="font-size:28px;cursor:pointer;line-height:60px"
            @click="close"
          ></i>
          <i
            v-else
            class="el-icon-s-unfold"
            style="font-size:28px;cursor:pointer;line-height:60px"
            @click="close"
          ></i>
          <div id="adminicon">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="out"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <img src="@/assets/wbd.png" alt="" />
            <div class="text">管理员</div>
          </div>
        </el-header>

        <el-main class="contentline">
          <router-view :key="$route.path" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import asynclist from "@/utils/Navigation";
import { Vue, Component } from "vue-property-decorator";
@Component({})
export default class extends Vue {
  public selectlist: any[] = asynclist;
  public width = 200;
  public isCollapse = false;
  public activePath = "";

  get pathline() {
    const path = this.$route.path.split("/");
    if (path.length == 2) {
      return `/${path[1]}`;
    } else {
      return `/${path[1]}/${path[2]}`;
    }
  }

  // get proxyActivePath(): any {
  //   const patten = new RegExp(/^(\/[a-zA-Z_-]*)\/?\w*/);
  //   return patten.exec(this.$route.path), RegExp.$1;
  // }

  // set proxyActivePath(param: any) {
  //   this.activePath = param;
  // }

  public close() {
    this.isCollapse = !this.isCollapse;
    if (this.isCollapse) {
      this.width = 65;
    } else {
      this.width = 200;
    }
  }
}
</script>

<style lang="scss" scoped>
#adminicon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .text {
    font-size: 14px;
    font-weight: bold;
  }
}
::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  min-height: 400px;
}
::v-deep .el-menu-vertical-demo {
  height: 100%;
}
.el-aside {
  display: inline-block;
  transition: width 0.5s;
  ::v-deep ul {
    background: transparent;
  }
}
.home {
  width: 100%;
  height: 100vh;
  .adminname {
    padding: 10px 0px;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: white;
    i {
      padding: 0px 10px 0px 25px;
    }
    span {
      transition: width 0.5s;
    }
  }
  .contentline {
    box-sizing: border-box;
    padding: 20px;
  }
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
}
</style>
